<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ppt</title>
	<link rel="stylesheet" href="./css/jquery.fullPage.css">
	<style type="text/css">
		body{
			margin:0;
			position: relative;
		}
		.pptId {
		    display: block;       /* iframes are inline by default */
		    border: none;         /* Reset default border */
		    height: 100vh;        /* Viewport-relative units */
		    width: 100vw;
		    z-index: 1
		}
		.pptId img {
			width: 100vw;

		}
		.container{
			position: absolute;
			z-index: 1000;
			top: 0;
		}
	    .promp{
	 	  	box-sizing: border-box;
			width: 315px;
			height: 396px;
			background: url('./bg.jpg') no-repeat;
			text-align: center;
			font-family: "Microsoft YaHei";
			font-weight: 600;
			font-size: 14px;
			float: left;
			margin: 10px;
			color: #2abdfa;
			}
		.promp-warp{
			height: 65%;
		}
		.model{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width:100%;
			z-index: 500;
			background-color: #e1e1e1;
			opacity: 0.8;
		}
		.avtar{
			position: relative;
			width:100%;
			height: 100%;
		}
		.img{
			position: absolute;
			display: block;
			width:130px;
			height: 130px;
			top: 32px;
			left: 91px;
			border: 1px solid #3b5e99;
			border-radius: 50%;
		}
		.hide{
			display: none;
		}
		.show{
			display: block;
		}
		.message{
			text-align: center;
			margin-top: 25px;
		}
		.message div {
			margin-top: 15px;
		}
		.fp-controlArrow{
			display: none;
		}
	</style>
</head>
<body>
	<div id="pptId" class="pptId">
	    <div class="section">
	       <div class="slide">
	       	  <img src="./img1/1.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/2.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/3.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/4.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/5.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/6.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/7.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/8.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/9.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/10.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/11.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/12.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/13.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/14.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/15.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/16.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/17.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/18.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/19.jpg">
	       </div>
	       <div class="slide">
	       	  <img src="./img1/20.jpg">
	       </div>

	    </div>
	</div>
	<div class="hide box">
		<div class="model"></div>
		<div class="container"></div>
	</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		(function(win, doc, $) {

			//使用轮播
			$('#pptId').fullpage({
				resize: true
			});
			//键盘上下键点击
			$("body").keydown(function(event) {
				if(event && (event.which == 33 || event.which == 37)){ // 按上
				   $(".fp-prev").click();
				  }
				if(event && (event.which == 34 || event.which == 39)){ //按下   
					$(".fp-next").click();
				  }   
			})
			//鼠标左右键点击
			$("body").mousedown(function(event) {
				if(event && event.which == 1) {
					$(".fp-prev").click();
				}
				if(event && event.which == 3) {
					$(".fp-next").click();
				}
			})
			//禁止鼠标右键菜单弹出
			$('body').bind('contextmenu', function() {
			    return false;
			 });

			
			var websocket = null, isRecog = false, id = undefined;

			//判断当前浏览器是否支持WebSocket
			if('WebSocket' in window){
		    websocket = new WebSocket("ws://192.168.10.173:9000/video?url=rtsp%3a%2f%2f192.168.10.172%2fuser%3dadmin%26password%3d%26channel%3d1%26stream%3d0.sdp");
			}else{
			  alert('Not support websocket');
			}

			//连接发生错误的回调方法
			websocket.onerror = function(){
			    console.log("error");
			};


			//连接成功建立的回调方法
			websocket.onopen = function(event){
			    console.log("ws has open");
			    send();
			}


			//接收到消息的回调方法
			websocket.onmessage = function(event){
				var personMessage = JSON.parse(event.data);
				var status = personMessage.data.status;
					// id  = personMessage.data.track;
			    if(status == "recognizing"){
			    	console.log("正在识别");
			    }else if(status == "recognized"){
		    		isRecog = true;
		    		var tag = personMessage.data.person.tag;
		    		var name, dep;
		    		if(tag) {
		    			tag = JSON.parse(tag)
		    			var name = tag.name, dep = unescape(tag.department);
		    		 }
		    		createDom(personMessage.data.face.image, name, dep);
			    }else if(status == "unrecognized") {
			    	isRecog = true;
			    	createDom(personMessage.data.face.image, "游客", "无");
			    }else if(status == "gone"){
			    	console.log("已经离开");
			    	if(isRecog) {
			    		setTimeout(function() {
			    			var len = $(".container")[0].childNodes.length;
			    			if($(".container")[0].firstChild) {
			    				$(".container")[0].firstChild.remove();
			    				layOut();
			    			}
			    			if(len == 1) {
			    				$(".box").hide();
			    			}
			    		}, 5000) //此处时间是指相隔5秒获取的弹窗消失
			    	}
			    }
			}
			//创造元素节点，加入提示框
			function createDom(url, name, dep) {
				var dateTime = format('yyyy.mm.dd hh : ii');
				var htm = "<div class='promp' ><div class='promp-warp'><div class='avtar'><img src=data:image/jpg;base64,"+url+" class='img'></div><div class='message'><div class='name'>姓名&nbsp;:&nbsp;<span>"+ name +"</span></div><div>部门&nbsp;:&nbsp;<span class='department'>"+dep+"</span></div><div>时间&nbsp;:&nbsp;<span class='time'>"+dateTime+"</span></div></div></div></div>";
				$(".container").append(htm);
				$(".box").show();
				layOut();
			}

			//获取打卡时间
			function format(time, pattern) {
			  let y, m, d, h, i, s;
			  if (!pattern) {
			    if (time) {
			      pattern = time;
			    } else {
			      pattern = 'yyyy-mm-dd hh:ii:ss';
			    }
			    time = null;
			  }
			  if (!time) {
			    time = new Date();
			  } else if (!(time instanceof Date)) {
			    time = new Date(time);
			  }
			  y = time.getFullYear();
			  m = time.getMonth() + 1;
			  d = time.getDate();
			  h = time.getHours();
			  i = time.getMinutes();
			  s = time.getSeconds();
			  m < 10 && (m = '0' + m);
			  d < 10 && (d = '0' + d);
			  h < 10 && (h = '0' + h);
			  i < 10 && (i = '0' + i);
			  s < 10 && (s = '0' + s);
			  return pattern.replace('yyyy', y).replace('mm', m).replace('dd', d).replace('hh', h).replace('ii', i).replace('ss', s);
			}

			//对提示框重新计算布局
			function layOut() {
				var len = $(".container")[0].childNodes.length;
				if(len < 4) {
					var w = $(".container").css("width"), reg = /\d+/;
				    w = - parseInt(w.match(reg)[0])/2 + "px";
					$(".container").css({"top":"50%","left":"50%", "margin-top":"-198px","margin-left": w})
				}else{
					$(".container").css({"top":"0","left":"0", "margin-top":"0","margin-left": "0"})
				}
			}

			//连接关闭的回调方法
			websocket.onclose = function(){
			  console.log("ws has closed");
			}

			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			win.onbeforeunload = function(){
			  websocket.close();
			}

			//发送消息
			function send(){
				var message = "url="+encodeURIComponent("rtsp://10.36.11.172/user=admin&password=&channel=1&stream=0.sdp");
				websocket.send(message);
			}

		})(window, document,$)
	});
</script>
</html>